<template>
  <div class="goods-list-item" @click="itemCLick">
    <!-- :href="goodsItem.link" -->
    <a href="#">
      <img :src="showImage" alt="" @load="imageLoad" />
      <p>{{ goodsItem.title }}</p>
      <span class="price">￥{{ goodsItem.price }}</span>
      <span class="collect"> ☆{{ goodsItem.cfav }}人收藏</span>
    </a>
  </div>
</template>

<script>
// 引入事件总线
import bus from "../../../router/eventBus";
export default {
  props: {
    goodsItem: {
      type: Object,
    },
  },
  computed: {
    showImage() {
      return this.goodsItem.image || this.goodsItem.show.img;
    },
  },
  methods: {
    // 监听图片是否加载完成
    imageLoad() {
      // 通过路由判断是(主页/详情页)图片加载完成
      if (this.$route.path.indexOf("home") !== -1) {
        bus.$emit("homeImageLoad");
      } else if (this.$route.path.indexOf("detail") !== -1) {
        bus.$emit("detailImageLoad");
      }
    },
    // 点击商品，跳转到详情页
    itemCLick() {
      this.$router.push("./detail/" + this.goodsItem.iid);
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list-item {
  box-sizing: border-box;
  width: 48%;
  margin: 5px 0;
  text-align: center;
  background-color: #fff;
  a {
    display: block;
    img {
      width: 100%;
      border-radius: 3%;
    }
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
      text-align: left;
    }
    .price {
      color: var(--color-high-text);
    }
    .collect {
      color: #f8d495;
      font-size: 14px;
    }
  }
}
</style>